<template>
  <div class="home">
    <div style="width: 100%; height: 100%" id="earth"></div>
  </div>
</template>

<script>
import "echarts-gl";
import "../assets/fonts/js/world.js";
import elqpe from "@/img/world.jpg";
import rJQYikcpl from "@/img/world.jpg";
import Qtal from "@/img/starfield.jpg";
export default {
  name: "EchartsTest",
  data() {
    return {};
  },
  mounted() {
    this.getTestView();
  },
  methods: {
    getTestView() {
      this.drawLine();
    },
    drawLine() {
      var option = {};
      let earth = this.$echarts.init(document.getElementById("earth"));
      let mapChart = this.$echarts.init(
        document.createElement("canvas"),
        null,
        {
          width: 2048,
          height: 1024,
        }
      );

      mapChart.setOption({
        geo: {
          type: "map",
          map: "world",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90],
          ],
          itemStyle: {
            normal: {
              areaColor: "transparent",
              borderColor: "#fff",
            },
            emphasis: {
              areaColor: "yellow",
            },
          },
          label: {
            show: false,
          },
        },
      });

      option = {
        backgroundColor: "#000",
        globe: {
          baseTexture: elqpe,
          heightTexture: rJQYikcpl,

          displacementScale: 0.1,

          shading: "lambert",

          environment: Qtal, //空间底图

          light: {
            ambient: {
              intensity: 0.1,
            },
            main: {
              intensity: 1.5,
            },
          },

          layers: [
            {
              type: "blend",
              texture: mapChart,
            },
          ],
        },
        series: [],
      };
      earth.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
}
</style>